<template>
  <nut-popup
    :visible="locationGuideState.visible"
    position="center"
    round
    :close-on-click-overlay="false"
    @click-overlay="handleClose"
  >
    <view class="w-[600rpx] bg-white rounded-[32rpx] p-[40rpx] flex flex-col gap-[24rpx]">
      <view class="flex items-center justify-between">
        <text class="text-[32rpx] font-semibold text-[#165DFF]">手动开启定位权限指南</text>
        <IconFont
          name="close"
          class="text-[32rpx] text-[#999]"
          @click="handleClose"
        />
      </view>
      <view class="bg-[#f5f5f5] rounded-[24rpx] p-[24rpx] flex flex-col gap-[16rpx]">
        <text class="text-[26rpx] text-[#333] leading-[36rpx]">
          1. 点击微信右上角“...”菜单
        </text>
        <text class="text-[26rpx] text-[#333] leading-[36rpx]">
          2. 选择“设置”并进入“隐私”选项
        </text>
        <text class="text-[26rpx] text-[#333] leading-[36rpx]">
          3. 找到“位置信息”设置
        </text>
        <text class="text-[26rpx] text-[#333] leading-[36rpx]">
          4. 将权限设置为“使用期间允许”或“始终允许”
        </text>
        <text class="text-[26rpx] text-[#333] leading-[36rpx]">
          5. 返回页面重新尝试定位
        </text>
      </view>
      <text class="text-[24rpx] text-[#999] leading-[34rpx]">
        提示：不同微信版本的设置路径可能略有不同
      </text>
      <nut-button
        type="primary"
        size="large"
        class="bg-[#165DFF] text-white border-none rounded-[24rpx] text-[28rpx] py-[16rpx]"
        @click="handleClose"
      >
        我知道了
      </nut-button>
    </view>
  </nut-popup>
</template>

<script setup lang="ts">
import { IconFont } from "@nutui/icons-vue-taro";
import { locationGuideState, hideLocationGuide } from "@/composables/locationGuide";

const handleClose = () => {
  hideLocationGuide();
};
</script>

